<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .box,.box1,.box2{
            width: 300px;
            height: 150px;
            background-color: burlywood;
            overflow: hidden;
            white-space: nowrap;
        }
        .box1{
            background-color: rosybrown;
            display: inline-block;
        }
        .box2{
            background-color: yellowgreen;
            display: inline-block;
        }
        .show{
            opacity: 1;
            width: 300px;
        }
        .active{
            transition: all ease 2s;
        }
        .hide{
            opacity: 0;
            width: 0px;
        }
        .list{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .list li{
            background-color: #dedede;
            margin: 4px 0px;
            padding: 4px 10px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .list li span:last-child{
            cursor: pointer;
        }
        .li-active{
            transition: all ease 2s;
        }
        .li-hide{
            opacity: 0;
            transform: translateX(60%);
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>过渡效果组件</h4>
        <pre>   
        以组件定义的包裹方式，描述transition过渡组件内部的唯一根元素的vue语法在执行时，配合该组件定义的CSS动画进行延迟操作
        以组件定义的包裹方式，描述transition-group过渡组件内部的多个根元素的语法执行时，配合该组件定义的css动画进行延迟操作
        =>基本使用
            + 隐藏 - enter -> 显示
                - 显示前的样式 from
                - 显示过程动画 active
                - 显示后的样式 to
            + 显示 - leave -> 隐藏
                - 隐藏前的样式 from
                - 隐藏过程动画 active
                - 隐藏后的样式 to
        =>页面加载时执行动画：
                由属性 appear 取值true开启，在未定义  appearFromClass appearActiveClass appearToClass
                使用进入动画样式作为初始加载动画样式，在定义指定样式后，可以独立定义进入样式
        </pre>
        <input type="button" value="显示元素" @click="flag=true">
        <input type="button" value="隐藏元素" @click="flag=false">
        <br><br>
        <transition
            leave-from-class="show"
            leave-active-class="active"
            leave-to-class="hide"
            enter-from-class="hide"
            enter-active-class="active"
            enter-to-class="show"
        >
            <div class="box" v-show="flag">
                元素容器
            </div>
        </transition>
        <br>
        <transition
            leave-from-class="show"
            leave-active-class="active"
            leave-to-class="hide"
            enter-from-class="hide"
            enter-active-class="active"
            enter-to-class="show"
        >
            <div class="box" v-if="flag">
                元素容器
            </div>
        </transition>
        <hr>
        <input type="button" value="显示元素1" @click="flag1=true">
        <input type="button" value="显示元素2" @click="flag1=false">
        <br><br>
        <!-- <transition
            leave-from-class="show"
            leave-active-class="active"
            leave-to-class="hide"
            enter-from-class="hide"
            enter-active-class="active"
            enter-to-class="show"
        >
            <div class="box1" v-if="flag1">元素容器1</div>
            <div class="box2" v-else>元素容器2</div>
        </transition> -->
        <transition-group
            leave-from-class="show"
            leave-active-class="active"
            leave-to-class="hide"
            enter-from-class="hide"
            enter-active-class="active"
            enter-to-class="show"
        >
            <div class="box1" v-if="flag1">元素容器1</div>
            <div class="box2" v-if="!flag1">元素容器2</div>
        </transition-group>
        <hr>
        <input type="button" value="addArrItem" @click="addArrItem()">
        <ul class="list">
            <transition-group
                appear
                enter-from-class="li-hide"
                enter-active-class="li-active"
                leave-active-class="li-active"
                leave-to-class="li-hide"
                @after-enter="showTip()"
            >
                <li v-for="(item,i) in arr" :key="item">
                    <span>{{item }}</span>
                    <span @click="removeArrItem(i)">X</span>
                </li>
            </transition-group>
        </ul>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    flag:true,
                    flag1:true,
                    arr:[1,2,3]
                }
            },
            methods: {
                addArrItem() {
                    this.arr.push( Math.random() )
                },
                removeArrItem(i){
                    this.arr.splice(i,1)
                },
                showTip(){
                    alert("动画结束")
                }
            },
        }).mount("#app")
    </script>
</body>
</html>